<template>
	<div class="nav-bar">
		<div class="left">
			<img height=58 src="../assets/img/common/logo.png" alt="">
			<el-button @click="handleToggle" link :icon="icon" style="color:aliceblue;font-size: 36px;"></el-button>
		</div>
		<el-menu router mode="horizontal" :ellipsis="false" background-color="#545c64" text-color="#fff"
			active-text-color="#ffd04b">
			<el-menu-item index="1">站点设置</el-menu-item>
			<el-menu-item index="2">预览网站</el-menu-item>
			<el-sub-menu index="3">
				<template #title>
					<el-space>
						<el-avatar :src="profile.avatar"/>
						{{profile.fullname}}
					</el-space>
				</template>
				<el-menu-item index="3-1">消息通知</el-menu-item>
				<el-menu-item index="/account">账号设置</el-menu-item>
				<el-menu-item index="3-3">退出登录</el-menu-item>
			</el-sub-menu>
		</el-menu>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useMenuStore } from '@/stores/menu';
import { useAccountStore } from '@/stores/account';
import { onMounted } from 'vue';
let account = useAccountStore();
onMounted(() => {
	// 加载当前账户资料
	account.loadProfile(sessionStorage.id);
})
//提取账户state
let { profile } = storeToRefs(account);

let menu = useMenuStore();
//提取getters计算属性
let { icon } = storeToRefs(menu);

// 折叠菜单
let handleToggle = () => {
	menu.toggle();
}

</script>
<style scoped lang="less">
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #545c64;

	.left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
	}

	.el-menu {
		border-bottom: 0;
	}
}
</style>
